<template>
  <div class="app-container">
    <div class="system-view">
      <h2>轮播图管理</h2>
      <div>
        <div class="block">
          <div class="demonstration"
               style="font-weight: 700; text-align: center; margin: 0 auto;">轮播图列表</div>
          <div class="img-list">
            <el-image style="width: 300px; height: 200px"
                      :src="src1"></el-image>
            <el-image style="width: 300px; height: 200px"
                      :src="src2"></el-image>
            <el-image style="width: 300px; height: 200px"
                      :src="src3"></el-image>
          </div>
          <div class="upload-div">
            <el-upload class="upload-demo"
                       drag
                       action="https://jsonplaceholder.typicode.com/posts/"
                       multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip"
                   slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'System',
  computed: {},
  data() {
    return {
      src1: 'http://127.0.0.1:3000/uploads/images/lunBoMap-image/轮播图4.webp',
      src2: 'http://127.0.0.1:3000/uploads/images/lunBoMap-image/轮播图5.webp',
      src3: 'http://127.0.0.1:3000/uploads/images/lunBoMap-image/轮播图6.webp',
    }
  },
}
</script>

<style lang="scss">
.system-view {
  .img-list {
    width: 1000px;
    height: 250px;
    margin: 10px auto;
    border-bottom: 1px solid #ccc;

    display: flex;
    justify-content: space-around;
    align-content: center;
  }
  .upload-div {
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>